<template>
  <div 
    class="bgh" 
    style="min-height:100vh">
    <div 
      class="mui-input-row mui-search" 
      style="height:40px;">
      <input 
        v-model="queryname" 
        type="search"
        class="mui-input-clear"
        style="background:#fff;border-radius:0;padding-left:15px" 
        placeholder="搜索" 
        @input="dosearch">
    </div>

    <scroller 
      ref="my_scroller"
      :on-refresh="refresh" 
      :on-infinite="infinite" 
      style="margin-top:80px;bottom:80px">
      <div 
        v-for="(item, index) in ddList" 
        :key="index" 
        class="bgf maincontent">
        <div class="ddcontent ">
          <div class="ddimg">
            <img 
              :src="item.imagepath" 
              width="100%"
            >
          </div>

          <div class="ddinfo">
            <p style="margin-bottom:5px">{{ item.itemname }}</p>
            <p >{{ item.specsname }}</p>
          </div>
          <div style="width:20%">
            <span 
              class="moneyinfo" 
              style="color:#333">￥ {{ item.amount }}</span>
            <span class="moneyinfo"> {{ item.usednum }} / {{ item.num }} </span>
          </div>

        </div>
        <!-- <p class="money">共 {{ item.num }} 件商品 合计￥ {{ item.amount }} 元</p> -->
        <p 
         
          class="btn">
          <span 
            v-if="item.usedend+''=='false'&&(item.orderstatus=='0'||item.orderstatus=='1')" 
            @click="goddpage3(item)" >使用</span>
          <span 
            v-if="item.usedend+''=='false'&&(item.orderstatus=='0'||item.orderstatus=='1')" 
            @click="tuikuan(item)">退款</span>
          <span v-if="item.orderstatus=='2'" >退款中</span>
          <span v-if="item.orderstatus=='3'" >已退款</span>
          <span v-if="item.usedend+''=='true'" @click="goddpage3(item)">已用完</span>
        </p>
      </div>
    </scroller>

    <div 
      v-if="ishowtk" 
      class="mui-backdrop">
      <div class="popdiv">
        <p style="color:#333;text-align:center;font-size:16px">退款申请</p>
        <p>
          <input 
            v-model="tel" 
            type="number"
            placeholder="退款手机号" 
            style="margin-bottom:0;font-size:14px">
        </p>
        <p>
          <textarea 
            v-model="des" 
            cols="30"
            style="
            font-size:14px;margin-bottom:0"
            placeholder="退款原因"
            rows="5"/>
        </p>
        <p style="display:flex;justify-content:space-evenly;margin-bottom:0">
          <button 
            type="button" 
            style="width:30%"
            class="mui-btn" 
            @click="ishowtk=false">取消</button>
          <button 
            type="button" 
            style="width:30%"
            class="mui-btn mui-btn-danger" 
            @click="dotuikuan">确认</button>
        </p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  layout: 'default2',
  data() {
    return {
      ishowtk: false,
      ts: this.newStore(),
      ddList: [],
      orderno: '',
      des: '',
      tel: '',
      queryname: '',
      page: 1,
      pageSize: '10'
    }
  },
  watch: {
    queryname() {
      this.ddList = []
      const req = {
        token: localStorage.getItem('token'),
        query: this.queryname,
        page: '1',
        pageSize: '100000'
      }
      this.spost(this.ts, '/itemc/getusedlist', req).then(ts => {
        this.ddList = ts.d.data
      })
    }
  },
  created() {
    this.getddList()
  },
  methods: {
    dotuikuan() {
      if (this.tel == '') {
        mui.toast('请输入退款手机号', { duration: '1000', type: 'div' })
        return
      }
      if (this.des == '') {
        mui.toast('请输入退款原因', { duration: '1000', type: 'div' })
        return
      }
      const req = {
        token: localStorage.getItem('token'),
        orderno: this.orderno,
        des: this.des,
        tel: this.tel
      }
      this.spost(this.ts, '/Orderc/addRefund', req).then(ts => {
        if (ts.d.flag == '200') {
          mui.toast('申请提交成功', { duration: '1000', type: 'div' })
          this.ishowtk = false
          this.dosearch()
        } else {
          mui.toast(ts.d.message, { duration: '1000', type: 'div' })
        }
      })
    },
    tuikuan(item) {
      this.tel = ''
      this.des = ''
      this.ishowtk = true
      this.orderno = item.orderno
    },
    dosearch() {
      this.page = 1
      this.getddList()
    },
    refresh(done) {
      this.page = 1
      this.getddList(done)
      setTimeout(() => {
        this.$refs.my_scroller.finishPullToRefresh()
      }, 200)
    },
    infinite(done) {
      setTimeout(() => {
        this.page += 1
        this.getddList(done)
      }, 500)
    },
    goddpage3(item) {
      this.$router.push({
        name: 'ddpage2',
        query: {
          from: '订单',
          word: '订单详情',
          orderno: item.orderno,
        }
      })
    },
    getddList(fn) {
      const req = {
        token: localStorage.getItem('token'),
        query: this.queryname,
        page: this.page + '',
        pageSize: this.pageSize
      }
      this.spost(this.ts, '/itemc/getorderlist', req).then(ts => {
        if (ts.d.data.length < 1) {
          fn(true)
          return
        } else if (fn) {
          fn()
        }
        if (this.page == 1) {
          this.ddList = []
          this.ddList = ts.d.data
        } else {
          this.ddList = this.ddList.concat(ts.d.data)
        }
      })
    }
  }
}
</script>

<style scoped>
.popdiv {
  position: fixed;
  z-index: 80;
  width: 80%;
  left: 10%;
  top: 20%;
  background: #f1f1f1;
  padding: 20px;
}
.mui-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.3);
}
.moneyinfo {
  text-align: right;
  display: inline-block;
  width: 100%;
  color: rgb(143, 143, 148);
  line-height: 20px;
}
.maincontent {
  padding: 15px;
  width: 96%;
  margin: 10px auto;
  border-radius: 5px;
}
.ddcontent {
  display: flex;
  justify-content: space-between;
}
.ddcontent:first-child {
  margin-top: 0;
}
.ddimg {
  width: 30%;
}
.ddinfo {
  width: 50%;
  padding: 0 10px;
}
.ddinfo p:first-child {
  color: #333;
  line-height: 18px;
}
.money {
  padding: 15px 0;
  padding-bottom: 6px;
  text-align: right;
  color: #333;
}
.btn {
  height: 15px;
}
.btn span {
  padding: 5px 10px;
  border-radius: 15px;
  border: 1px solid #ccc;
  margin: 0 5px;
  float: right;
  letter-spacing: 2px;
}
</style>
